<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="我的推广" placeholder bgColor="#fff"></u-navbar>
    <view class="revenue-info" :style="'background-image: url('+revenue+');'">
      <view class="withdrawal-history" @click="jumpTo('/pages/my/revenue?tabsCurrent=1')">提现记录>></view>
      <view class="u-text-center u-font-24 u-m-b-6">可提现金额(元)</view>
      <view class="u-text-center u-font-40 u-m-b-24" style="font-weight: 500;color: #E20300;">¥ {{ (incomeCountInfo.balance / 100).toFixed(2) || 0 }}</view>
      <view class="btn" @click="realName">申请提现</view>
      <view class="u-flex">
        <view class="u-flex-1 u-text-center">
          <view class="u-font-24">昨日收益</view>
          <view class="u-font-28">¥ {{ (incomeCountInfo.yesterdayIncome / 100).toFixed(2) || 0 }}</view>
        </view>
        <u-line length="40rpx" color="#2979ff" direction="col"></u-line>
        <view class="u-flex-1 u-text-center">
          <view class="u-font-24">累计收益</view>
          <view class="u-font-28">¥ {{ (incomeCountInfo.allMonth / 100).toFixed(2) || 0 }}</view>
        </view>
      </view>
    </view>
    <view class="box">
      <view class="item" @click="jumpTo('/pages/my/invite')">
        <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <!-- 橙子名片图标 -->
          <circle cx="12" cy="12" r="7" fill="#FFA726" stroke="#F57C00" stroke-width="1.5"/>
          <rect x="9" y="10" width="6" height="4" rx="0.5" fill="#FFF3E0"/>
          <path d="M10 11H14M10 13H12" stroke="#F57C00" stroke-width="1"/>
          <path d="M16 8L19 5M19 5L16 2M19 5H15" stroke="#F57C00" stroke-width="1.5" stroke-linecap="round"/>
          <circle cx="19" cy="5" r="1" fill="#F57C00"/>
        </svg>
        <text>推广名片</text>
      </view>
      <view class="item" @click="jumpTo('/pages/my/promoterList')">
        <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <!-- 葡萄统计图标 -->
          <path d="M5 16V11H9V8H13V5H17V12H19" stroke="#E1BEE7" stroke-width="2" stroke-linecap="round"/>
          <circle cx="9" cy="11" r="1.5" fill="#8E24AA"/>
          <circle cx="13" cy="8" r="1.5" fill="#8E24AA"/>
          <circle cx="17" cy="5" r="1.5" fill="#8E24AA"/>
          <circle cx="19" cy="12" r="1.5" fill="#8E24AA"/>
          <circle cx="16" cy="16" r="2" fill="#8E24AA"/>
          <circle cx="13" cy="18" r="2" fill="#8E24AA"/>
          <circle cx="10" cy="16" r="2" fill="#8E24AA"/>
          <circle cx="13" cy="14" r="2" fill="#8E24AA"/>
        </svg>
        <text>推广人统计</text>
      </view>
      <view class="item" @click="jumpTo('/pages/my/revenue')">
        <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <!-- 柠檬佣金图标 -->
          <circle cx="12" cy="12" r="6" fill="#FFEB3B" stroke="#FBC02D" stroke-width="1.5"/>
          <path d="M10 10H14M10 12H14M10 14H12" stroke="#F57F17" stroke-width="1.5" stroke-linecap="round"/>
          <path d="M6 6H8M6 8H8M6 10H8" stroke="#8D6E63" stroke-width="1.5" stroke-linecap="round"/>
          <path d="M16 18H18M16 20H18M16 22H18" stroke="#8D6E63" stroke-width="1.5" stroke-linecap="round"/>
          <path d="M12 6L13 5C13 4 12 3 11 4L12 6Z" fill="#7CB342"/>
        </svg>
        <text>佣金明细</text>
      </view>
      <view class="item" @click="jumpTo('/pages/my/promoterOrder')">
        <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- 草莓订单图标 -->
            <path d="M6 8H19L17 18H8L6 8Z" fill="#FFCDD2" stroke="#F44336" stroke-width="1.5"/>
            <path d="M8 6V5C8 3.9 8.9 3 10 3H14C15.1 3 16 3.9 16 5V6" stroke="#F44336" stroke-width="1.5"/>
            <circle cx="12" cy="12" r="3" fill="#F44336"/>
            <circle cx="12" cy="11" r="0.5" fill="#5D4037"/>
            <circle cx="11" cy="13" r="0.5" fill="#5D4037"/>
            <circle cx="13" cy="13" r="0.5" fill="#5D4037"/>
            <path d="M12 9L13 8C13 7 12 6 11 7L12 9Z" fill="#7CB342"/>
            <circle cx="9" cy="19" r="1" fill="#795548"/>
            <circle cx="16" cy="19" r="1" fill="#795548"/>
        </svg>
        <text>推广人订单</text>
      </view>
    </view>
  </view>
</template>

<script>
import revenue from '../../static/my/revenue.png'
import { incomeCount } from '@/api/index'

export default {
  data() {
    return {
      revenue,
      userInfo: {},
      incomeCountInfo: {
        balance: 0,
        yesterdayIncome: 0,
        allMonth: 0,
      },
    };
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo')
    this.getIncomeCount()
  },
  methods: {
    getIncomeCount() {
      uni.showLoading({ mask: true })
      incomeCount({ userId: this.userInfo.userId }).then(res => {
        uni.hideLoading()
        this.incomeCountInfo = res.data
      })
    },
    realName() {
      const that = this
      if(!this.userInfo.phonenumber) {
        uni.showToast({
          icon: 'none',
          title: `请先绑定手机号`
        })
        setTimeout(() => {
          that.jumpTo('/pages/userInfo/userPhone')
        }, 1000)
        return
      }
      if(this.userInfo.verifiedStatus == '1') {
        this.jumpTo('/pages/my/withdraw')
      } else {
        this.jumpTo('/pages/my/realName')
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .revenue-info {
    width: 750rpx;
    height: 356rpx;
    background-repeat: no-repeat;
    background-size: 750rpx 356rpx;
    padding: 48rpx 0 0;
    position: relative;
    .withdrawal-history {
      position: absolute;
      right: 24rpx;
      top: 32rpx;
      font-size: 24rpx;
    }
    .btn {
      width: 180rpx;
      height: 52rpx;
      line-height: 52rpx;
      text-align: center;
      border-radius: 200rpx;
      border: 2rpx solid #000000;
      font-size: 24rpx;
      color: #000000;
      margin: 0 auto;
      margin-bottom: 24rpx;
    }
  }
  .box {
    width: 702rpx;
    margin: 32rpx auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30rpx 30rpx;
    .item {
      width: 336rpx;
      height: 336rpx;
      background: #FFFFFF;
      border-radius: 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20rpx;
      font-size: 28rpx;
      box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(86, 92, 92, 0.2);
      // image {
      //   width: 122rpx;
      //   height: 122rpx;
      //   border-radius: 12rpx;
      // }
      .icon {
          width: 96rpx;
          height: 96rpx;
      }
    }
  }
}
</style>
